<template>
	<view>
		<view class="status_bar" :style="[{height:heights+'px',paddingTop:top+'px'}]">
			<view class="left" :style="{top:top+'px'}" @tap="Monitor">
				<image :src="imgurl+'zuojianyou.png'"></image>
			</view>
			预览问卷
		</view>
		<view :style="{height:height,width:width,marginTop:heights+top+'px'}" v-if="showpage">
			<view>
				<view class="header-title" :style="{color:color}">{{title}}</view>
				<view class="beizhu">
					{{beizhu ? beizhu : ''}}
				</view>
				<view class="main">
					<view class="main-item" v-for="(item,index) in list" :key="index">
						<view v-if="item.pid==1">
							<view class="main-item-title">
								<text>{{item.xuan==2?'*':''}}</text>
								{{index+1}}.{{item.ti}}
							</view>
							<radio-group v-if="item.yan == 1" :data-num="index" :data-id="item.id">
								<label class="labels flex" v-for="(item, index) in item.di" :key="item.id">
									<view>
										<radio color='#209FFC' style="transform:scale(0.7)" :value="item.id" :checked="index === current" />
										<text>{{item.wen}}</text>
									</view>
									<view v-if="item.img" class="diImg">
										<image :src="item.img" mode=""></image>
									</view>
								</label>
							</radio-group>
							<radio-group v-else class="flex_ti flex" :data-num="index" :data-id="item.id">
								<label class="labels other flex" v-for="(item, index) in item.di" :key="item.id">
									<view>
										<radio color='#209FFC' style="transform:scale(0.7)" :value="item.id" :checked="index === current" />
										<text>{{item.wen}}</text>
									</view>
									<view v-if="item.img" class="diImg">
										<image :src="item.img" mode=""></image>
									</view>
								</label>
							</radio-group>
						</view>
						<view v-if="item.pid==2">
							<view class="main-item-title">
								<text>{{item.xuan==2?'*':''}}</text>
								{{index+1}}.{{item.ti}}
								<text v-if="item.zuishao!=null && item.zuiduo!=null && item.zuishao!='' && item.zuiduo!='不限'">[请选择{{item.zuishao}}至{{item.zuiduo}}项]</text>
								<text v-if="item.zuishao!=null && item.zuiduo==null && item.zuishao!='' ">[至少选择{{item.zuishao}}项]</text>
								<text v-if="item.zuishao==null && item.zuiduo!=null && item.zuiduo!='' ">[至多选择{{item.zuiduo}}项]</text>
							</view>
							<checkbox-group v-if="item.yan == 1" :data-num="index" :data-id="item.id">
								<label class="labels flex" v-for="(item, index) in item.di" :key="item.id">
									<view>
										<checkbox color='#209FFC' style="transform:scale(0.7)" :value="item.id" :checked="item.checked" />
									</view>
									<view>{{item.wen}}</view>
								</label>
							</checkbox-group>
							<checkbox-group v-else class="flex_ti flex" :data-num="index" :data-id="item.id">
								<label class="labels other flex" v-for="(item, index) in item.di" :key="item.id">
									<view>
										<checkbox color='#209FFC' style="transform:scale(0.7)" :value="item.id" :checked="item.checked" />
									</view>
									<view>{{item.wen}}</view>
								</label>
							</checkbox-group>
						</view>
						<view v-if="item.pid==3">
							<view class="main-item-title">
								<text>{{item.xuan==2?'*':''}}</text>
								{{index+1}}.{{item.ti}}</view>
							<textarea class="textareacss" :data-num="index" :data-id="item.id" @input="getValue"></textarea>
						</view>
						<view class="remark_box" v-if="item.pid==4">
							<view class="item-title">
								<text>备注：{{item.beizhu.remark}}</text>
								<view v-if="item.beizhu.img.length > 0" class="img_box">
									<image v-for="el in item.beizhu.img" :src="el.url" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="buttoncss" :style="{background:color}" @tap="save">提交</view>
			<!-- <view class="report" @tap="Tip">举报</view> -->
			<view class="position flex" @tap="open">
				<image :src="imgurl+'yifu.png'"></image>
				<text>问卷外观</text>
			</view>
		</view>
		<view @touchend="end" @touchstart="start" v-else :style="{height:height,width:width,marginTop:heights+top+'px'}">
			<view class="header-title" style="color: #fff;">测试</view>
			<image class="img" :style="{height:height,width:width}" :src="backgroundimg"></image>
			<view class="clickview row">
				<image class="clickimg" :src="imgurl+'zhankai.png'" @tap="test"></image>
				<view>上滑开始</view>
			</view>
			<view class="position flex" @tap="open">
				<image :src="imgurl+'yifu.png'"></image>
				<text>问卷外观</text>
			</view>

		</view>
		<uni-popup ref="popup" type="right">
			<view class="mask-main" :style="{height:height,width:widths,marginTop:heights+top+'px'}">
				<view class="swiper-tab flex">
					<view class="swiper-tab-list" :class="[currentTab==0 ? 'on' : '']" :data-current="0" @tap="swichNav">设计主题色</view>
					<view class="swiper-tab-list" :class="[currentTab==1 ? 'on' : '']" :data-current="1" @tap="swichNav">设计封面</view>
				</view>
				<swiper :current="currentTab" style="height:80%;">
					<swiper-item>
						<view class="other-items flex">
							<view class="other-item row" v-for="(item,index) in imglist" :key="index" @tap="choose(index)">
								<image :src="item.img"></image>
								<text>{{item.title}}</text>
								<view class="mask flex" v-if="item.show">
									<image :src="imgurl+'choose.png'"></image>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="other-items flex">
							<view class="other-item row" v-for="(item,index) in backlist" :key="index" @tap="chooseBack(index)">
								<image :src="item.img"></image>
								<view class="mask flex" v-if="item.show">
									<image :src="imgurl+'choose.png'"></image>
								</view>
							</view>
						</view>
						<view class="add">
							<image :src="addimg" @tap="choicePic"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import api from "@/common/api.js";
	import {
		baseURL
	} from "@/common/http.js";
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import app from "../../App.vue"
	export default {
		components: {
			uniPopup,
		},
		data() {
			return {
				imgurl: "",
				currentTab: 0,
				type: '',
				yulan: '未设置',
				title: '', //标题
				beizhu: '',
				heights: '',
				top: '',
				height: "",
				width: "",
				widths: "",
				showpage: true,
				indexs: 0,
				id: '',
				wenid: '',
				backgroundimg: "",
				addimg: '../../static/images/add.png',
				startX: 0, //开始时的X坐标
				startY: 0, //开始时的Y坐标
				list: [{
					title: '测试1',
					content: [{
						items: '111'
					}, {
						items: '222'
					}]
				}, {
					title: '测试1',
					content: [{
						items: '111'
					}, {
						items: '222'
					}]
				}],
				color: '#209FFC',
				backimg: '',
				imglist: [{
					img: app.globalData.imgurl + 'hulan.png',
					color: '#209FFC',
					title: "湖蓝",
					show: true
				}, {
					img: app.globalData.imgurl + 'skycolor.png',
					color: '#adcce9',
					title: "天空色",
					show: false
				}, {
					img: app.globalData.imgurl + 'green.png',
					color: '#02a554',
					title: "绿色",
					show: false
				}, {
					img: app.globalData.imgurl + 'zicolor.png',
					color: '#7862aa',
					title: "明紫色",
					show: false
				}, {
					img: app.globalData.imgurl + 'yellowcolor.png',
					color: '#fece8e',
					title: "奶黄色",
					show: false
				}],
				backlist: [{
					img: app.globalData.imgurl + 'noback.png',
					show: true
				}, {
					img: app.globalData.imgurl + 'test.jpg',
					show: false
				}, ]
			};
		},
		methods: {
			//导航栏
			Monitor() {
				if (this.type == 1) {
					uni.navigateTo({
						url: '../questionSet/questionSet?yulan=' + this.yulan
					})
				} else {
					uni.navigateBack({
						delta: -1
					})
					// uni.navigateTo({
					// 	url: this.tyle == 1 ? '../editDiaocha' : (item.type == 2 ? '' : '')
					// })
				}
			},
			//点击tab切换
			swichNav(e) {
				if (this.currentTab === e.target.dataset.current) {
					return false;
				} else {
					this.currentTab = e.target.dataset.current
				}
			},
			//单选
			radioChange(e) {
				console.log(e)
			},
			open() {
				this.$refs.popup.open()
			},
			/* //举报
			Tip() {
				uni.navigateTo({
					url: '../tip/submitTip/submitTip?wenid=' + this.wenid + '&id=' + this.id + '&type=' + 1,
				})
			}, */
			//选择颜色
			choose(index) {
				let ids = index
				this.yulan = '已设置'
				this.imglist.forEach((item, index) => {
					if (index === ids) {
						this.imglist[index].show = true
						this.color = item.color
					} else {
						this.imglist[index].show = false
					}
				})
				api.look({
					api: 'yandatec',
					id: this.id,
					yanse: this.color,
					beijing: this.backgroundimg
				}).then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			//选择封面
			chooseBack(index) {
				if (index === 0) {
					this.showpage = true
					this.backgroundimg = ""
				} else {
					this.showpage = false
					this.backgroundimg = this.backlist[index].img
					this.yulan = '已设置'
				}
				this.indexs = index
				let ids = index
				this.backlist.forEach((item, index) => {
					if (index === ids) {
						this.backlist[index].show = true
					} else {
						this.backlist[index].show = false
					}
				})
				api.look({
					api: 'yandatec',
					id: this.id,
					yanse: this.color,
					beijing: this.backgroundimg
				}).then(res => {
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			//上传图片
			choicePic() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.getFileSystemManager().readFile({
							filePath: res.tempFilePaths[0], //选择图片返回的相对路径
							encoding: 'base64', //编码格式
							success: res => { //成功的回调
								// this.addimg = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
								this.backgroundimg = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
								this.backlist.forEach(el => {
									el.show = false
								})
								this.backlist.push({
									img: 'data:image/jpeg;base64,' + res.data,
									show: true
								})
								api.look({
									api: 'yandatec',
									id: this.id,
									// yanse: '',
									beijing: 'data:image/jpeg;base64,' + res.data
								}).then(res => {
									console.log(this.backgroundimg)
								}).catch(err => {
									console.log(err)
								})
							}
						});
					}
				});

			},
			start(e) {
				this.startX = e.touches[0].pageX; // 获取触摸时的x坐标  
				this.startY = e.touches[0].pageY; // 获取触摸时的x坐标
			},
			test() {
				// if (this.indexs != 0) {
				this.showpage == true ? this.showpage = false : this.showpage = true
				// }
			},
			end(e) {
				var endX = e.changedTouches[0].pageX
				var endY = e.changedTouches[0].pageY
				var xOffset = endX - this.startX
				var yOffset = endY - this.startY
				if (Math.abs(xOffset) < Math.abs(yOffset) && Math.abs(yOffset)) {
					if (yOffset < 0) {
						if (this.indexs != 0) {
							this.showpage == true ? this.showpage = false : this.showpage = true
						}
					} else {
						console.log('向下滑动')
					}
				}
				// if (this.indexs != 0) {
				// 	that.showpage == true ? that.showpage = false : that.showpage = true
				// }
			},
			save() {
				uni.showModal({
					content: '此问卷为预览状态，不能提交',
					showCancel: false,
					confirmColor: '#1F9FFB'
				})
			}
		},
		created() {
			this.heights = uni.getMenuButtonBoundingClientRect().height
			this.top = uni.getMenuButtonBoundingClientRect().top
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			this.id = app.globalData.id
			this.wenid = app.globalData.wenid
			this.type = options.type
			this.imgurl = app.globalData.imgurl;
			uni.getSystemInfo({
				success: (res) => {
					this.height = res.windowHeight + 'px'
					this.width = res.windowWidth + 'px'
					this.widths = res.windowWidth * 0.5 + 'px'
					this.staheight = res.statusBarHeight + 50
				}
			});
			let data = {
				api: 'wenfind',
				shu: '1',
				table: '3',
				wenid: app.globalData.wenid,
			}
			api.editSur(data).then(res => {
				if (res.code == 200) {
					this.title = res.date[0].namewenid
					this.beizhu = res.date[0].text
					this.color = res.date[0].yanse
					if (res.date[0].beijing != '' && res.date[0].beijing != null) {
						this.showpage = false
					}
					this.backgroundimg = res.date[0].beijing
					console.log(this.backgroundimg)
				}
			}).catch(err => {
				console.log(err)
			})
			let datas = {
				api: 'tables',
				wenid: app.globalData.wenid
			}
			api.look(datas).then(res => {
				if (res.code == 200) {
					this.list = res.date
					this.list.map(item => {
						if (item.pid == 4) {
							item.beizhu = JSON.parse(item.beizhu)
						}
						item.show = false
						return item
					})
				}
			}).catch(err => {
				console.log(err)
			})
		},
		onShow() {
			if (this.backgroundimg != "") {
				this.showpage = false
			}
		}
	}
</script>

<style lang="scss">
	.status_bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		font-size: 30rpx;
		padding-bottom: 10rpx;
		z-index: 1000;

		.left {
			float: left;
			position: absolute;
			width: 100rpx;
			height: max-content;
			top: 0;
			bottom: 0;
			left: 20rpx;
			margin: auto;

			image {
				width: 20rpx;
				height: 35rpx;
			}
		}

		text {
			font-size: 30rpx;
		}
	}

	page {
		background: #F0F0F0
	}

	.header-title {
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
		color: #209FFC;
		padding: 30rpx;
		box-sizing: border-box;
		padding-top: 70rpx;
	}

	.beizhu {
		font-size: 24rpx;
		color: #666;
		padding: 0 30rpx;
		margin: 30rpx 0;
	}

	.main-item {
		width: 690rpx;
		margin: 15rpx auto;

		.main-item-title {
			text {
				color: #ff0000;
			}
		}

		.textareacss {
			width: 680rpx;
			height: 50rpx;
			line-height: 50rpx;
			margin: 10rpx auto;
			border: 1rpx solid #DFDFDF;
			border-radius: 10rpx;
		}
	}

	.labels {
		min-height: 60rpx;
		line-height: 60rpx;
		width: 100%;
		flex-wrap: wrap;

		.diImg {
			width: 100%;
			height: 100px;
			padding: 10px 0;
			box-sizing: border-box;

			image {
				max-width: 100%;
				max-height: 100%;
				object-fit: contain;
			}
		}
	}

	.buttoncss {
		width: 690rpx;
		margin: 100rpx auto 0;
		background: #209FFC;
		color: #fff;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 36rpx;
	}

	.report {
		width: 690rpx;
		margin: 30rpx auto 0;
		color: #666;
		text-align: right;
		font-size: 30rpx;
	}

	.position {
		width: 160rpx;
		height: 80rpx;
		background: #fff;
		box-shadow: 0rpx 5rpx 10rpx 0rpx rgba(51, 51, 51, 0.3);
		border-radius: 40rpx 0rpx 0rpx 40rpx;
		position: fixed;
		bottom: 20%;
		right: 0;

		text {
			color: #209FFC;
			font-size: 24rpx;
		}

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.img {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.clickimg {
		width: 80rpx;
		height: 80rpx;
	}

	.clickview {
		position: absolute;
		bottom: 10%;
		left: 0;
		width: 100%;
		color: #fff;
		font-size: 30rpx;
	}

	// 弹框
	.mask-main {
		width: 50%;
		height: 100%;
		background: #fff;
		position: fixed;
		top: 0;
		right: 0;
	}

	.swiper-tab {
		background: #fff;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 100rpx;
		justify-content: space-between;

		.swiper-tab-list {
			width: 50%;
			color: #333;
			font-size: 32rpx;
			text-align: center;
		}
	}

	.swiper-tab .on {
		color: #1F9FFB;
		position: relative
	}

	.on:after {
		content: "";
		display: block;
		height: 8rpx;
		width: 90rpx;
		background: #1F9FFB;
		position: absolute;
		bottom: 0;
		left: 25%;
		border-radius: 16rpx
	}

	.other-items {
		flex-wrap: wrap;
		// justify-content:space-around;
		justify-content: space-between;
		width: 100%;
		padding: 25rpx;
		box-sizing: border-box;

		.other-item {
			margin: 20rpx 0;
			position: relative;

			.mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 140rpx;
				height: 140rpx;
				background: rgba(0, 0, 0, 0.5);
				z-index: 1000;
				justify-content: center;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}

			image {
				width: 140rpx;
				height: 140rpx;
			}

			text {
				color: #999;
				font-size: 24rpx;
				margin-top: 10rpx;
			}
		}
	}

	.add {
		margin-top: 20rpx;
		border-top: 1rpx solid #DFDFDF;

		image {
			width: 150rpx;
			height: 150rpx;
			margin: 20rpx;
			border: 1rpx solid #DFDFDF;
		}
	}

	.remark_box {
		padding-bottom: 30rpx;
		box-sizing: border-box;

		.img_box {
			width: 100%;
			height: 200rpx;

			image {
				width: 33%;
				height: 100%;
				margin-top: 20rpx;
			}
		}
	}

	.flex_ti {
		width: 100%;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;

		.other.labels {
			width: 50%;
		}
	}
</style>
